<template>
  <video-player 
    :url="playUrl"
    :poster="poster"
    :enable="playerEnable"
    :mask-content="maskContent"
  ></video-player>
</template>

<script>
import { reactive, computed, toRefs, watch } from 'vue'
import VideoPlayer from '@/components/VideoPlayer'
import { bangumiApi } from '@/api'
export default {
  name: 'BangumiPlayer',
  components: {
    VideoPlayer
  },
  props: {
    detailData: {
      type: Object
    }
  },
  setup(props) {
    const hasDetailData = computed(() => !!props.detailData)
    const epInfo = computed(() => props.detailData?.epInfo ?? null) 
    const epId = computed(() => epInfo?.value?.id ?? null)
    const epType = computed(() => props.detailData?.epType ?? null)

    const limitCode = computed(() => {
        let t = 0
        if (hasDetailData.value) {      
            const area = props.detailData.area     
            const ssId = props.detailData.ssId
            const epv = epInfo.value
            if (area === 1) {
                t = 1
            } else if (area === 3) {
                t = 4
            } else if (ssId === -1) {
                t = 3
            } else if (props.detailData.epList.length === 0 && props.detailData.pubInfo.is_started === 0) {
                t = 2
            } else if (epv.from !== 'bangumi' && epv.from !== 'vupload') {
                t = 5
            } else if ([6, 7, 8, 9, 12, 13].indexOf(epv.status) >= 0) {
                t = 6
            } else if (epv.archive_attr) {
                t = 7
            }
        }     
        return t
    })

    const epStatus = computed(() => {
        return epInfo.value.status || props.detailData.meidaInfo.status
    })

    const isFree = computed(() => {
      return [6, 7, 8, 9, 12, 13].indexOf(epStatus.value) < 0
    })

    const params = reactive({
      playUrl: '',
      poster: computed(() => epInfo?.value?.cover ?? ''),
      playerEnable: computed(() => {      
        if (epId.value === null) {
          return false
        }
        if (epType.value === 1) {
            if ([1, 2, 3, 5, 7].indexOf(limitCode.value) >= 0) {
              return !1
            }
        }
        return !(!isFree.value || epInfo.value.archive_attr) 
        || (!isFree.value && !epInfo.value.archive_attr && !!props.detailData.rightsInfo.is_preview)
      }),
      maskContent: computed(() => {      
          let str = ''
          switch (limitCode.value) {
              case 1:
                  str = '<div>非常抱歉，根据版权方要求</div><div>您所在的地区无法观看本片</div>'
                  break
              case 2:
                  if (epType.value !== 2) {
                      const pubInfo = props.detailData.pubInfo
                      str = pubInfo.unknow_pub_date === 1 ? '' : `${pubInfo.pub_time_show}即将开播`
                  }
                  break
              case 3:
                  str = '地球上找不到该内容哦 (╥﹏╥)'
                  break
              case 5:
                  str = '该视频仅支持客户端观看'
                  break
              case 7:
                  str = '<div>本集为互动视频</div><div>请使用最新版APP或网页观看</div>'
                  break
              default:
                  str = ''
          }
      
          if (!isFree.value) {
              str = '<div>本片为付费内容</div><div>请前往App购买观看</div>'
          }
      
          return str   
      })
    })

    const getData = async () => {
        try {          
          if (!params.playerEnable) {
              return
          }
          const { result } = await bangumiApi.getPlayUrl({
              ep_id: epId.value
          })
          if (result) {
              const { durl } = result
              params.playUrl = durl[0].url
          }            
        } catch (error) {
          console.log(error)
        }
    }

    getData()

    watch(epId, () => {
      getData()
    })

    return {
      ...toRefs(params)
    }
  }
}
</script>

<style>

</style>